function BuildTotalScoreChart(name, jams, max)
{
	var dotsize = 0;
    
//    var jsvars = Drupal.settings.chart_totalscoreperjam;
//    var jams = jsvars.jams;
//    var max = jsvars.max;

    var globalvars = DXML.chart_score_global;
    var period2Starts = globalvars.period2Starts;
    var width = globalvars.width;
    var height = globalvars.height;
    var spacingX = globalvars.spacingX;
    var padTop = globalvars.padTop;
    var padBottom = globalvars.padBottom;
    var padLeft = globalvars.padLeft;
    var homeColor = globalvars.homeColor;    
    var visitorColor = globalvars.awayColor;    
    var homeIcon = globalvars.homeIcon;    
    var visitorIcon = globalvars.awayIcon;    

	var chartHeight = height - padBottom - padTop;
	
	$('#' + name + " svg").remove();
	chart = Raphael($('#' + name)[0], width, height);

	// Draw BG
	var bg = chart.rect(padLeft,
						padTop,
						width,
						chartHeight)
                .attr({fill: '#fff', stroke: 'none'});
	
	
	// Draw ratings
	var homeDots = chart.set();
	var visitorDots = chart.set();
	var hoverset = chart.set();
	var homeLabels = chart.set();
	var visitorLabels = chart.set();
	var home_pathstr = "M " + jams[0].x + " " + jams[0].home.totalScoreY;
	var visitor_pathstr = "M " + jams[0].x + " " + jams[0].away.totalScoreY;
    var xLabels = chart.set();
    
	
	for (var i = 0; i < jams.length; i++) {
	    var jam = jams[i]
        var homeScore = jam.home;
        var visitorScore = jam.away;
		var x = jam.x; 
		homeY = homeScore.totalScoreY;
		visitorY = visitorScore.totalScoreY;
		homeScore = homeScore.totalScore;
		visitorScore = visitorScore.totalScore;
        		
		// Append to path
		home_pathstr += " L " + x + " " + homeY;
		visitor_pathstr += " L " + x + " " + visitorY;
		
		// Plot rating
		homeDot = chart.circle(x, homeY, dotsize).attr({fill: '#000'});
		visitorDot = chart.circle(x, visitorY, dotsize).attr({fill: '#000'});
		
		// Define vertical strips for hover
		hoverset.push(chart.rect(x - (spacingX / 2), 0, spacingX, height)
						.attr({stroke: 'none',
							   fill: '#fff',
							   opacity: 0
							}).toFront());
		
		var rect = hoverset[hoverset.length - 1];

		// Hover Label, always on outside of lines
        var labelOffset = -15;
        if (homeScore < visitorScore) {
            labelOffset *= -1;
        }
        
        var homeLabelOffset = labelOffset;
        var visitorLabelOffset = labelOffset;
        
        if (height - padBottom - homeY < 20) {
            homeLabelOffset = -15;
        }        
        if (height - padBottom - visitorY < 20) {
            visitorLabelOffset = 15;
        }        
        if (homeY - padTop < 20) {
            homeLabelOffset = 15;
        }        
        if (visitorY - padTop < 20) {
            visitorLabelOffset = -15;
        }
        
		var homeLabel = chart.text(x, homeY + homeLabelOffset, homeScore).hide();
		var visitorLabel = chart.text(x, visitorY - visitorLabelOffset, visitorScore).hide();
		homeLabels.push(homeLabel);
		visitorLabels.push(visitorLabel);
        
        // X Axis Labels
        var jamnum = i + 1;
        if (i >= period2Starts) {
            jamnum = i - period2Starts + 1;
        }
        var xLabel = chart.text(x, height - padBottom + 10, jamnum);
        xLabels.push(xLabel);
		
		// Events
        (function (homeDot, visitorDot, homeLabel, visitorLabel, xLabel) {
        	rect.hover(function() {
        		// Mouse In
        		homeDot.attr("r", dotsize + 2);
        		visitorDot.attr("r", dotsize + 2);
        		homeLabel.show();
        		visitorLabel.show();
                xLabel.attr('fill', '#000');
        	}, function () {
        		// Mouse Out
        		homeDot.attr("r", dotsize);
        		visitorDot.attr("r", dotsize);
        		homeLabel.hide();
        		visitorLabel.hide();
                xLabel.attr('fill', '#999');                           
        	});
        	
        })(homeDot, visitorDot, homeLabel, visitorLabel, xLabel);
        
        homeDots.push(homeDot);
        visitorDots.push(visitorDot);
	}

    var axes = chart.set();
    var fontSize = 10;    
    
    // Draw Y axis
	var x = padLeft - .5;
	axes.push(chart.path("M "+ x +" "+ padTop +" L "+ x +" "+ (height-padBottom))
				.attr({'stroke': '#999'}));
	var yLabelPos = padTop + (chartHeight / 2);
	var yLabelTitle = chart.text(20, yLabelPos, 'Score')
            .attr({'fill': '#999'}).rotate(-90);
	
	var yLabels = chart.set();
    
	// Draw X axis
	var y = height - padBottom + .5;
	axes.push(chart.path("M "+ padLeft +" "+ y +" L "+ width +" "+ y)
				.attr({'stroke': '#999'}));
	var xLabelTitle = chart.text(padLeft - 12, height - padBottom + 9, 'Jam')
            .attr({'text-anchor': 'end',
                   'fill': '#999'});
	
	xLabels.attr({'text-anchor': 'center',
				  'font-size': fontSize+'px',
                  'fill': '#999'});
    
    // Draw periods
    // [[GRA++
    var period2StartsAt = period2Starts * spacingX;
    if (globalvars.period2StartsAt) {
        period2StartsAt = globalvars.period2StartsAt;
    } // ]]
    periodX = padLeft + period2StartsAt;// - (spacingX / 2);
    axes.push(chart.path("M "+ periodX +" "+ padTop +" L "+ periodX +" "+ (height-padBottom))
				.attr({'stroke': '#999',
                       'stroke-dasharray': '- '}));
    chart.text(padLeft + 6, padTop + 10, 'Period 1').attr(
            {'text-anchor': 'start',
             'fill': '#999'});
    chart.text(periodX + 6, padTop + 10, 'Period 2').attr(
            {'text-anchor': 'start',
             'fill': '#999'});

	// Fonts
	yLabelTitle.attr({'font-size': '14px'});
	xLabelTitle.attr({'font-size': '14px'});
	
	// Draw path
	var homePath = chart.path(home_pathstr);
	var visitorPath = chart.path(visitor_pathstr);

    // Team colors
    homePath.attr('stroke', homeColor);
    homeLabels.attr('fill', homeColor);
    visitorPath.attr('stroke', visitorColor);
    visitorLabels.attr('fill', visitorColor);
    
    // Team icons
    var lastHome = jams[jams.length - 1].home;
    var lastVisitor = jams[jams.length -1].away;
    
    // offset so icons never overlap
    var lastHomeY = lastHome.totalScoreY;
    var lastVisitorY = lastVisitor.totalScoreY;
    var iconHeight = 20;
    if (Math.abs(lastHomeY - lastVisitorY) < iconHeight) {
        if (lastHomeY > lastVisitorY) {
            lastVisitorY -= iconHeight;
        } else {
            lastHomeY -= iconHeight;
        }
    } else {
        // Won't overlap so just center on line plot
        lastHomeY -= iconHeight / 2;
        lastVisitorY -= iconHeight / 2;
    }
    
    chart.image(homeIcon, lastHome.x + 6, lastHomeY, 20, 20);
    chart.image(visitorIcon, lastVisitor.x + 6, lastVisitorY, 20, 20);
    
	// Z-Order
	homePath.toBack();
	visitorPath.toBack();
	axes.toBack();
	bg.toBack();
	hoverset.toFront();
}

function BuildScoreChart(name, jams, max, dataSetName)
{
//    var jams = jsvars.jams;
//    var max = jsvars.max;

    var globalvars = DXML.chart_score_global;
    var period2Starts = globalvars.period2Starts;
    var width = globalvars.width;
    var height = globalvars.height;
    var spacingX = globalvars.spacingX;
    var padTop = globalvars.padTop;
    var padBottom = globalvars.padBottom;
    var padLeft = globalvars.padLeft;
    var homeColor = globalvars.homeColor;    
    var visitorColor = globalvars.awayColor;    
    var homeIcon = globalvars.homeIcon;    
    var visitorIcon = globalvars.awayIcon;    
	var chartHeight = height - padBottom  - padTop;

	$('#' + name + " svg").remove();
	var chart = Raphael($('#'+name)[0], width, height);

	// Draw BG
	var bg = chart.rect(padLeft,
						padTop,
						width,
						chartHeight)
                .attr({fill: '#fff', stroke: 'none'});
	
	// Draw ratings
	var hoverset = chart.set();
	var homeLabels = chart.set();
	var visitorLabels = chart.set();
    var xLabels = chart.set();
    var homeBars = chart.set();
    var visitorBars = chart.set();
    var bgBars = chart.set();

    var midline = (chartHeight / 2) + padTop;
    var valLabelPadding = 8;    
	
	for (var i = 0; i < jams.length; i++) {
	    var jam = jams[i];
        var homeScore = jam.home[dataSetName];
        var visitorScore = jam.away[dataSetName];
		var x = jam.x;     // same as visitor.x
		// [[GRA++
        if (jam.width) {
            spacingX = jam.width;
        } else {
            spacingX = globalvars.spacingX;
        } // GRA]]
        // Draw bars
        var labelPad = 26;
        var visitorHeight = (visitorScore / max) * ((chartHeight - labelPad) / 2);
        var homeHeight = (homeScore / max) * ((chartHeight - labelPad) / 2);
        visitorBars.push(chart.rect(x, midline - 1 - visitorHeight, spacingX - 2, visitorHeight));
        homeBars.push(chart.rect(x, midline + 1, spacingX - 2, homeHeight));
        
        // Bar bg
        var bgBar = chart.rect(x, padTop, spacingX - 2, chartHeight);
        
        
		// Define vertical strips for hover
		hoverset.push(chart.rect(x, 0, spacingX, height)
						.attr({stroke: 'none',
							   fill: '#fff',
							   opacity: 0
							}).toFront());
		
		var rect = hoverset[hoverset.length - 1];

        // Value labels
        var visitorScoreLabel = visitorScore;
        if (visitorScore < 1) {
            visitorScoreLabel = '';
        }
        var visitorLabel = chart.text(x + (spacingX / 2),
                                      midline - visitorHeight - valLabelPadding,
                                      visitorScoreLabel).hide();
        
        var homeScoreLabel = homeScore;        
        if (homeScore < 1) {
            homeScoreLabel = '';
        }
        var homeLabel = chart.text(x + (spacingX / 2),
                                   midline + homeHeight + valLabelPadding,
                                   homeScoreLabel).hide();
        
		homeLabels.push(homeLabel);
		visitorLabels.push(visitorLabel);
        
        // X Axis Labels
        var jamnum = i + 1;
        if (i >= period2Starts) {
            jamnum = i - period2Starts + 1;
        }
        var xLabel = chart.text(x + (spacingX / 2),
                                height - padBottom + 10,
                                jamnum);
        xLabels.push(xLabel);
            // [[GRA++
        var timeLabel;
        if (jam.jamDuration) {
            timeLabel = chart.text(x + (spacingX / 2),
                                    height - padBottom - 10,
                                    jam.jamDuration)
            timeLabel.hide();
        }// GRA]]
		
		// Events
        (function (homeLabel, visitorLabel, xLabel, bgBar, timeLabel) {
        	rect.hover(function() {
        		// Mouse In
        		homeLabel.show();
        		visitorLabel.show();
                xLabel.attr('fill', '#000');
                bgBar.attr('fill', '#f9f9f9');
                if (timeLabel) { timeLabel.show(); }
        	}, function () {
                // Mouse Out
                homeLabel.hide();
                visitorLabel.hide();
                xLabel.attr('fill', '#999');
                bgBar.attr('fill', '#eee');
                if (timeLabel) { timeLabel.hide(); }
            });
        	        	
        })(homeLabel, visitorLabel, xLabel, bgBar, timeLabel);
        
        bgBars.push(bgBar);
	}

    
    
    var axes = chart.set();
    var fontSize = 10;    
    
    // Draw midline
	axes.push(chart.path("M "+ padLeft +" "+ midline +" L "+ width +" "+ midline)
				.attr({'stroke': '#fff', 'stroke-width': '2px'}));
    
    // Draw Y axis
	var lineX = padLeft - .5;
	axes.push(chart.path("M "+ lineX +" "+ padTop +" L "+ lineX +" "+ (height-padBottom))
				.attr({'stroke': '#999'}));
	var yLabelPos = padTop + (chartHeight / 2);
	var yLabelTitle = chart.text(20, yLabelPos, 'Score').attr(
            {'fill': '#999'}).rotate(-90);
	
	// Draw X axis
	var lineY = height - padBottom  + .5;
	axes.push(chart.path("M "+ padLeft +" "+ lineY +" L "+ width +" "+ lineY)
				.attr({'stroke': '#999'}));
	var xLabelTitle = chart.text(padLeft - 12, height - padBottom  + 9, 'Jam')
            .attr({'text-anchor': 'end',
                   'fill': '#999'});
	
	xLabels.attr({'text-anchor': 'center',
				  'font-size': fontSize+'px',
                  'fill': '#999'});
    
    // Draw periods
    // [[GRA++
    var period2StartsAt = period2Starts * spacingX;
    if (globalvars.period2StartsAt) {
        period2StartsAt = globalvars.period2StartsAt;
    } // GRA]]
    var periodX = padLeft + period2StartsAt;
    axes.push(chart.path("M "+ periodX +" "+ padTop +" L "+ periodX +" "+ (height-padBottom ))
				.attr({'stroke': '#999',
                       'stroke-dasharray': '- '}));
    chart.text(padLeft + 6, padTop + 10, 'Period 1').attr(
            {'text-anchor': 'start',
             'fill': '#999'});
    chart.text(periodX + 6, padTop + 10, 'Period 2').attr(
            {'text-anchor': 'start',
             'fill': '#999'});

	// Fonts
	yLabelTitle.attr({'font-size': '14px'});
	xLabelTitle.attr({'font-size': '14px'});
	
    // Data colors
    homeBars.attr('fill', homeColor);
    homeBars.attr('stroke', 'none');
    homeLabels.attr('fill', homeColor);
    visitorBars.attr('fill', visitorColor);
    visitorBars.attr('stroke', 'none');
    visitorLabels.attr('fill', visitorColor);
    
    bgBars.attr('fill', '#eee');
    bgBars.attr('stroke', 'none');
    
    // Team icons on axis
    var icoSize = 20;
    chart.image(visitorIcon, 8, padTop + 30, icoSize, icoSize);
    chart.image(homeIcon, 8, height - padBottom - 30 - icoSize, icoSize, icoSize);
    
	// Z-Order
	homeBars.toBack();
    visitorBars.toBack();
    axes.toBack();
    bgBars.toBack();
    bg.toBack();
	hoverset.toFront();
}

